<script setup lang="ts">
import { ref, computed, shallowRef, defineAsyncComponent } from 'vue';
import { getObjValue } from '@/utils/util';
import tag2 from '@/assets/images/platformChart/tag_2.png';
import tag3 from '@/assets/images/platformChart/tag_3.png';
import tag4 from '@/assets/images/platformChart/tag_4.png';
import tag5 from '@/assets/images/platformChart/tag_5.png';
import ico4 from '@/assets/images/platformChart/ico_4.png';
import ico5 from '@/assets/images/platformChart/ico_5.png';

const props = defineProps<{
  segObj2: any;
  segObj3: any;
  segObj4: any;
}>();

const energizeEchart = defineAsyncComponent(() => import('../echarts/energizeEchart.vue'));
const energizeEchartRef = shallowRef<InstanceType<typeof energizeEchart>>();

const seg4Checked = ref('累计');
const seg4Data = computed(() => props.segObj4?.data?.[seg4Checked.value] || []);

defineExpose({
  hideTip() {
    energizeEchartRef.value?.hideTip();
  },
});
</script>
<template>
  <div class="rounded-xl bg-white shadow mt-3 pb-4">
    <div class="title-2 p-4">{{ segObj2?.title || '-' }}</div>
    <div class="mx-2 rounded-xl py-3 bg-gradient-to-b from-[#fcf3fd] to-white">
      <div class="mx-3 pt-1 pb-2 mb-2 flex justify-between items-center border-b border-[#EEEEEE]">
        <div class="flex items-center">
          <van-image width="18" height="18" :src="ico4" />
          <span class="text-xs text-[#999] ml-1">总量</span>
        </div>
        <div class="title-1">{{ segObj2?.zongliang || '-' }}</div>
      </div>
      <div class="flex items-center justify-between px-3">
        <!-- <div class="flex flex-col items-center">
          <div class="font-medium text-lg">{{ getObjValue(segObj2?.data?.[0])[1] }}</div>
          <div class="text-sm text-[#999]">{{ getObjValue(segObj2?.data?.[0])[0] }}</div>
        </div> -->
        <!-- <div class="flex flex-col items-center">
          <div class="font-medium text-lg">{{ getObjValue(segObj2?.data?.[1])[1] }}</div>
          <div class="text-sm text-[#999]">{{ getObjValue(segObj2?.data?.[1])[0] }}</div>
        </div> -->
        <div class="flex flex-col items-center">
          <div class="font-medium text-lg">{{ getObjValue(segObj2?.data?.[2])[1] }}</div>
          <div class="text-sm text-[#999]">{{ getObjValue(segObj2?.data?.[2])[0] }}</div>
        </div>
        <div class="flex flex-col items-center">
          <div class="font-medium text-[#dd3a72]">{{ getObjValue(segObj2?.data?.[5])[1] }}</div>
          <div class="text-xs text-[#999]">{{ getObjValue(segObj2?.data?.[5])[0] }}</div>
        </div>
        <div class="flex flex-col items-center">
          <div class="font-medium">{{ getObjValue(segObj2?.data?.[6])[1] }}</div>
          <div class="text-xs text-[#999]">{{ getObjValue(segObj2?.data?.[6])[0] }}</div>
        </div>
      </div>
      <div class="flex items-center justify-between px-3 mt-3">
        <!-- <div class="flex flex-col items-center">
          <div class="font-medium text-[#dd3a72]">{{ getObjValue(segObj2?.data?.[3])[1] }}</div>
          <div class="text-xs text-[#999]">{{ getObjValue(segObj2?.data?.[3])[0] }}</div>
        </div> -->
        <!-- <div class="flex flex-col items-center">
          <div class="font-medium">{{ getObjValue(segObj2?.data?.[4])[1] }}</div>
          <div class="text-xs text-[#999]">{{ getObjValue(segObj2?.data?.[4])[0] }}</div>
        </div> -->
      </div>
    </div>
    <div class="title-2 px-4 mt-4 mb-3">{{ segObj3?.title || '-' }}</div>
    <div class="border-b border-[#EEEEEE] mx-4 pb-1 mb-2 flex justify-between items-center">
      <div class="flex items-center">
        <van-image width="18" height="18" :src="ico5" />
        <span class="text-xs text-[#999] ml-1">总量</span>
      </div>
      <div class="title-1">{{ segObj3?.zongliang || '-' }}</div>
    </div>
    <div class="flex px-4">
      <div class="flex-1 rounded-lg bg-[#FFF4EC] pb-3">
        <div class="flex">
          <div
            class="text-white text-xs bg-contain bg-no-repeat w-[94px] h-[22px] leading-[22px] pl-2"
            :style="{ backgroundImage: `url(${tag2})` }"
          >
            {{ getObjValue(segObj3?.data?.[0])[0] }}
          </div>
        </div>
        <div class="title-2 px-3 my-2">{{ getObjValue(segObj3?.data?.[0])[1] }}</div>
        <div class="flex items-center px-3 justify-between">
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[2])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[2])[1] }}</div>
          </div>
          <div class="w-px h-[28px] bg-[#e2e2e2]"></div>
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[3])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[3])[1] }}</div>
          </div>
        </div>
      </div>

      <div class="flex-1 rounded-lg bg-[#F1F3FF] pb-3 ml-2">
        <div class="flex">
          <div
            class="text-white text-xs bg-contain bg-no-repeat w-[94px] h-[22px] leading-[22px] pl-2"
            :style="{ backgroundImage: `url(${tag3})` }"
          >
            {{ getObjValue(segObj3?.data?.[1])[0] }}
          </div>
        </div>
        <div class="title-2 px-3 my-2">{{ getObjValue(segObj3?.data?.[1])[1] }}</div>
        <div class="flex items-center px-3 justify-between">
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[4])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[4])[1] }}</div>
          </div>
          <div class="w-px h-[28px] bg-[#e2e2e2]"></div>
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[5])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[5])[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 rounded-lg bg-[#FEF9EC] pb-3 mx-4 mt-2">
      <div class="flex">
        <div
          class="text-white text-xs bg-contain bg-no-repeat w-[94px] h-[22px] leading-[22px] pl-2"
          :style="{ backgroundImage: `url(${tag4})` }"
        >
          {{ getObjValue(segObj3?.data?.[6])[0] }}
        </div>
      </div>
      <div class="flex items-center">
        <div class="title-2 px-3 my-2">{{ getObjValue(segObj3?.data?.[6])[1] }}</div>
        <div class="flex items-center px-3 justify-between ml-4">
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[7])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[7])[1] }}</div>
          </div>
          <div class="w-px h-[28px] bg-[#e2e2e2] mx-6 md:mx-12"></div>
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[8])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[8])[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 总邀请奖励 -->
    <div class="flex-1 rounded-lg bg-[#F3F2FF] pb-3 mx-4 mt-2">
      <div class="flex">
        <div
          class="text-white text-xs bg-contain bg-no-repeat w-[94px] h-[22px] leading-[22px] pl-2"
          :style="{ backgroundImage: `url(${tag5})` }"
        >
          {{ getObjValue(segObj3?.data?.[9])[0] }}
        </div>
      </div>
      <div class="flex items-center">
        <div class="title-2 px-3 my-2">{{ getObjValue(segObj3?.data?.[9])[1] }}</div>
        <div class="flex items-center px-3 justify-between ml-4">
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[10])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[10])[1] }}</div>
          </div>
          <div class="w-px h-[28px] bg-[#e2e2e2] mx-6 md:mx-12"></div>
          <div>
            <div class="text-xs text-[#999]">{{ getObjValue(segObj3?.data?.[11])[0] }}</div>
            <div class="num-1">{{ getObjValue(segObj3?.data?.[11])[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="title-2 px-4 mt-7 mb-3">{{ segObj4?.title || '-' }}</div>
    <div class="border-b border-[#EEEEEE] mx-4 pb-1 mb-4 flex justify-between items-center">
      <div class="flex items-center">
        <van-image width="18" height="18" :src="ico5" />
        <span class="text-xs text-[#999] ml-1">总量</span>
      </div>
      <div class="title-1">{{ segObj4?.zongliang || '-' }}</div>
    </div>
    <div class="flex items-center px-4">
      <div
        class="w-[42px] leading-5 text-center rounded-[10px] text-xs bg-[#F6F7F8] text-[#999] cursor-pointer"
        :class="{ 'tag-checked': seg4Checked === '累计' }"
        @click="seg4Checked = '累计'"
      >
        累计
      </div>
      <div
        class="w-[42px] ml-3 leading-5 text-center rounded-[10px] text-xs bg-[#F6F7F8] text-[#999] cursor-pointer"
        :class="{ 'tag-checked': seg4Checked === '今日' }"
        @click="seg4Checked = '今日'"
      >
        今日
      </div>
      <div
        class="w-[42px] ml-3 leading-5 text-center rounded-[10px] text-xs bg-[#F6F7F8] text-[#999] cursor-pointer"
        :class="{ 'tag-checked': seg4Checked === '昨日' }"
        @click="seg4Checked = '昨日'"
      >
        昨日
      </div>
    </div>
    <div class="flex items-center px-4 mt-4 justify-between">
      <div>
        <div class="flex items-center mb-3">
          <div class="w-2 h-2 rounded-full bg-gradient-to-b from-[#28D1FE] to-[#4376FF]"></div>
          <div class="text-xs text-[#999] mx-2">{{ getObjValue(seg4Data?.[0])[0] }}</div>
          <div class="num-1">{{ getObjValue(seg4Data?.[0])[1] }}</div>
        </div>
        <div class="flex items-center mb-3" v-show="!['今日', '昨日'].includes(seg4Checked)">
          <div class="w-2 h-2 rounded-full bg-gradient-to-b from-[#FF8A62] to-[#FF2B28]"></div>
          <div class="text-xs text-[#999] mx-2">{{ getObjValue(seg4Data?.[1])[0] }}</div>
          <div class="num-1">{{ getObjValue(seg4Data?.[1])[1] }}</div>
        </div>
        <div class="flex items-center">
          <div class="w-2 h-2 rounded-full bg-gradient-to-b from-[#FFDB51] to-[#FFB400]"></div>
          <div class="text-xs text-[#999] mx-2">{{ getObjValue(seg4Data?.[2])[0] }}</div>
          <div class="num-1">{{ getObjValue(seg4Data?.[2])[1] }}</div>
        </div>
      </div>
      <div class="h-[170px]">
        <energizeEchart ref="energizeEchartRef" :seg4Data="seg4Data" :seg4Checked="seg4Checked" />
      </div>
    </div>
  </div>
</template>
